import React from 'react';
import { Form, Input, Button, message } from 'antd';
import {
  UserOutlined,
  BankOutlined,
  BookOutlined,
  CodeOutlined,
  HeartOutlined,
  GlobalOutlined,
  GithubOutlined,
} from '@ant-design/icons';
import { FormCard } from '@/components/common';
import type { UserProfile } from '@/types/account';



interface EditProfileProps {
  profile: UserProfile | null;
  onUpdate: (data: Partial<UserProfile>) => void;
}

const EditProfile: React.FC<EditProfileProps> = ({ profile, onUpdate }) => {
  const [form] = Form.useForm();

  if (!profile) {
    return null;
  }

  const handleSubmit = (values: any) => {
    onUpdate(values);
  };

  return (
    <FormCard
      title="编辑个人资料"
      form={form}
      onFinish={handleSubmit}
      submitText="保存修改"
      formProps={{
        initialValues: {
          real_name: profile.real_name,
          blog: profile.blog,
          mood: profile.mood,
          github: profile.github,
          school: profile.school,
          major: profile.major,
          language: profile.language,
        }
      }}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
        <Form.Item
          label="真实姓名"
          name="real_name"
          tooltip="姓名不可修改"
          rules={[{ max: 50, message: '真实姓名不能超过50个字符' }]}
        >
          <Input 
            prefix={<UserOutlined style={{ color: '#bfbfbf' }} />}
            placeholder="请输入真实姓名" 
            disabled
          />
        </Form.Item>

        <Form.Item
          label="学校"
          name="school"
          rules={[{ max: 100, message: '学校名称不能超过100个字符' }]}
        >
          <Input 
            prefix={<BankOutlined style={{ color: '#bfbfbf' }} />}
            placeholder="请输入学校名称" 
          />
        </Form.Item>

        <Form.Item
          label="专业"
          name="major"
          rules={[{ max: 100, message: '专业名称不能超过100个字符' }]}
        >
          <Input 
            prefix={<BookOutlined style={{ color: '#bfbfbf' }} />}
            placeholder="请输入专业名称" 
          />
        </Form.Item>

        <Form.Item
          label="编程语言"
          name="language"
          rules={[{ max: 50, message: '编程语言不能超过50个字符' }]}
        >
          <Input 
            prefix={<CodeOutlined style={{ color: '#bfbfbf' }} />}
            placeholder="请输入擅长的编程语言" 
          />
        </Form.Item>
      </div>

      <Form.Item
        label="心情"
        name="mood"
        rules={[{ max: 100, message: '心情不能超过100个字符' }]}
      >
        <Input 
          prefix={<HeartOutlined style={{ color: '#bfbfbf' }} />}
          placeholder="请输入当前心情" 
        />
      </Form.Item>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
        <Form.Item
          label="个人博客"
          name="blog"
          rules={[
            { max: 200, message: '博客地址不能超过200个字符' },
            { type: 'url', message: '请输入有效的URL地址', warningOnly: true }
          ]}
        >
          <Input 
            prefix={<GlobalOutlined style={{ color: '#bfbfbf' }} />}
            placeholder="请输入个人博客地址" 
          />
        </Form.Item>

        <Form.Item
          label="GitHub"
          name="github"
          rules={[
            { max: 200, message: 'GitHub地址不能超过200个字符' },
            { type: 'url', message: '请输入有效的URL地址', warningOnly: true }
          ]}
        >
          <Input 
            prefix={<GithubOutlined style={{ color: '#bfbfbf' }} />}
            placeholder="请输入GitHub主页地址" 
          />
        </Form.Item>
      </div>
    </FormCard>
  );
};

export default EditProfile; 